<template>
  <div style="overflow-y: auto">
    <div class="center box-center" style="margin: 15px 0;">
      <a-input
        v-model="formData.fyear"
        style="width: 50px; padding: 0; margin: 0; border: 0;font-size: 18px !important; font-weight: 600 !important;"
      ></a-input>
      <span style="font-size: 18px !important; font-weight: 600 !important;">年药品审评员推荐表</span>
    </div>
    <table id="table-1" class="center">
      <tr>
        <td class="title">姓名</td>
        <td><a-input class="input_bor_no" v-model="formData.fbusmc" /></td>
        <td class="title">性别</td>
        <td>
          <a-radio-group name="sex"  v-model="formData.fsex" :defaultValue="formData.fsex" @change="handlerChangeSex">
            <a-radio :value="1"> 男 </a-radio>
            <a-radio :value="2"> 女 </a-radio>
          </a-radio-group>
        </td>
        <td class="title">出生年月</td>
        <td colspan="2">
          <a-date-picker
            @change="onPickerChange"
            v-model="formData.fcsny"
            class="input_bor_no"
          />
        </td>
      </tr>
      <tr>
        <td class="title">毕业院校</td>
        <td><a-input class="input_bor_no" v-model="formData.fbyyx" /></td>
        <td class="title">专业</td>
        <td><a-input class="input_bor_no" v-model="formData.fzy" /></td>
        <!-- <td class="title">学历</td>
        <td colspan="2">
          <a-input class="input_bor_no" v-model="formData.fxl" />
        </td> -->
      </tr>
      <tr>
        <td class="title">工作单位</td>
        <td colspan="3">
          <a-input class="input_bor_no" v-model="formData.fgzdw" />
        </td>
        <td class="title">部门</td>
        <td colspan="2">
          <a-input class="input_bor_no" v-model="formData.fszbm" />
        </td>
      </tr>
      <tr>
        <td class="title">职务</td>
        <td><a-input class="input_bor_no" v-model="formData.fzw" /></td>
        <td class="title">职称</td>
        <td><a-input class="input_bor_no" v-model="formData.fzc" /></td>
        <td class="title">现从事工作</td>
        <td colspan="2">
          <a-input class="input_bor_no" v-model="formData.fcsgz" />
        </td>
      </tr>
      <tr>
        <td class="title">单位电话</td>
        <td colspan="3">
          <a-input class="input_bor_no" v-model="formData.fdwdh" />
        </td>
        <td class="title">手机</td>
        <td colspan="2">
          <a-input class="input_bor_no" v-model="formData.fphone" />
        </td>
      </tr>
      <tr>
        <td class="title">传真</td>
        <td colspan="3">
          <a-input class="input_bor_no" v-model="formData.fcz" />
        </td>
        <td class="title">E-MALL</td>
        <td colspan="2">
          <a-input class="input_bor_no" v-model="formData.femail" />
        </td>
      </tr>
      <tr>
        <td class="title">拟推荐审评员资格</td>
        <td colspan="7">
          <a-radio-group :options="recommedZgArray" v-model="formData.ftjzg" />
        </td>
      </tr>
      <tr>
        <td colspan="7" style="text-align: center !important">工作简历</td>
      </tr>
      <tr>
        <td>时间</td>
        <td>工作单位</td>
        <td>所在部门</td>
        <td>职务</td>
        <td>职称</td>
        <td>从事工作</td>
        <td>操作</td>
      </tr>
      <tr v-for="(gzjl, index) in formData.gzjlList" :key="index">
        <td style="min-width: 257px">
          <a-range-picker
            :default-value="[gzjl.fgzkssj, gzjl.fgzjssj]"
            @change="onRangePickerChange($event, gzjl, index)"
            class="input_bor_no"
          />
        </td>
        <td><a-input v-model="gzjl.fgzdw" class="input_bor_no"></a-input></td>
        <td><a-input v-model="gzjl.fszbm" class="input_bor_no"></a-input></td>
        <td><a-input v-model="gzjl.fzw" class="input_bor_no"></a-input></td>
        <td><a-input v-model="gzjl.fzc" class="input_bor_no"></a-input></td>
        <td><a-input v-model="gzjl.fcsgz" class="input_bor_no"></a-input></td>
        <td style="display: flex" v-show="falg">
          <vxe-button
            class="m10"
            @click="handlerSave(gzjl)"
            type="submit"
            size="small"
            class-name="btn_bgc"
            >保存</vxe-button
          >
          <vxe-button
            @click="handlerDelete(gzjl, index)"
            type="danger"
            size="small"
            class-name="btn_bgc_red"
            >删除</vxe-button
          >
        </td>
      </tr>
      <tr style="padding: 0; margin: 0;">
        <td colspan="7">
          <input id="z1" @click="gzjlListAdd(formData.fbusmc)" type="button" value="+" class="btn_bgc" style="width:100%;text-align: center;line-height: 1.5;" />
        </td>
      </tr>
      <tr>
        <td style="padding: 0; margin: 0;" class="title">
          曾发表过的”药品生产相关监管、审评、检验方面的专著、文章“
        </td>
        <td style="padding: 0; margin: 0;" colspan="6">
          <a-textarea v-model="formData.ffbgdwz" style="height: 100%">
          </a-textarea>
        </td>
      </tr>
      <tr>
        <td class="title">所在单位意见</td>
        <td  style="padding: 0; margin: 0;" colspan="6">
          <a-textarea v-model="formData.fszdwyj" style="height: 100%">
          </a-textarea>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import moment from "moment";
import { addHcyGzjl, editHcyGzjl, deleteGzjl } from "../api/recommend";
import {recommedZgArray} from '../common/GroupConfig'
export default {
  name: "RecommendFormApp",
  props: {
    form: {
      type: Object,
      default: {},
    },
    falg: {
      type: Boolean,
      default() {
        return false;
      },
    },
    refresh:{type:Function}
  },
  data() {
    return {
      // 拟推荐审评员资格数组
      recommedZgArray:recommedZgArray,
      formData: {
        fyear: new Date().getFullYear(),
        ftjzg: "",
        fbusmc: "",
        fsex: "",
        fcsny: "",
        fbyyx: "",
        fzy: "",
        fxl: "",
        fgzdw: "",
        fszbm: "",
        fzw: "",
        fzc: "",
        fcsgz: "",
        fdwdh: "",
        fcz: "",
        ftjzg: "",
        femail: "",
        fszdwyj: "",
        ffbgdwz: "",
        // 工作简历
        gzjlList: [
          // {
          //   index: "1", //自定义id属性
          //   fbusmc: "", //姓名
          //   fcsgz: "", //从事工作
          //   fgzdw: "", //工作单位
          //   fgzjssj: "", //工作结束时间
          //   fgzkssj: "", //工作开始时间
          //   fszbm: "", //所在部门
          //   fzc: "", //职称
          //   fzw: "", //职务
          // },
        ],
      },
      // 保存从后端请求的工作经历
      gzjlList: [],
      // id
      fId: "",
    };
  },

  mounted() {},

  methods: {
    gzjlListAdd(index, fbusmc) {
      let gzjl = this.formData.gzjlList;
      let len = this.formData.gzjlList.length
      gzjl.push({
        fbusmc: fbusmc, //姓名
        fcsgz: "", //从事工作
        fgzdw: "", //工作单位
        fgzjssj: "", //工作结束时间
        fgzkssj: "", //工作开始时间
        fszbm: "", //所在部门
        fzc: "", //职称
        fzw: "", //职务
        index: len,
      });

      this.formData.gzjlList = gzjl;
    },
    onPickerChange(data, str) {
      this.formData.fcsny = str;
    },
    onRangePickerChange(data, gzjl) {
      const gzjlList = this.formData.gzjlList;
      const target = gzjlList.find((f) => f.index == gzjl.index);
      if (target) {
        target.fgzkssj = moment(data[0]).format("YYYY-MM-DD");
        target.fgzjssj = moment(data[1]).format("YYYY-MM-DD");
      }
      this.formData.gzjlList = gzjlList;
    },
    handlerChangeSex(e) {
      //console.log(e);
    },
    handlerEdit() {},
    // 删除工作简历
    handlerDelete(row, index) {
      //console.log(index);
      if (!row.id) {
        this.formData.gzjlList =  this.formData.gzjlList.filter((item) => item.index !== index);
        //console.log(this.formData.gzjlList);
      } else {
        deleteGzjl({ id: row.id }).then((res) => {
          if (res.success) {
            // this.$VxeMessage({ content: res.message, status: "success" });
            if(this.refresh) {
              this.refresh(this.form)
            }
          } else {
            this.$VxeMessage({ content: res.message, status: "error" });
          }
        });
      }
    },
    async handlerSave(row) {
      row.fbusmc = this.formData.fbusmc;
      if (!row.id) {
        //添加
        row.fhcytjid = this.fId;
        //console.log(row);
        const res = await addHcyGzjl(row);
        if (res.success) {
          this.$VxeMessage({ content: res.message, status: "success" });
        } else {
          this.$VxeMessage({ content: res.message, status: "error" });
        }
      } else {
        //编辑
        //console.log(row);
        const res = await editHcyGzjl(row);
        if (res.success) {
          this.$VxeMessage({ content: res.message, status: "success" });
        } else {
          this.$VxeMessage({ content: res.message, status: "error" });
        }
      }
    },
  },
  watch: {
    formData: {
      deep: true,
      handler() {
        setTimeout(() => {
          const form = JSON.parse(JSON.stringify(this.formData));
          this.$emit("change", form);
        }, 500);
      },
    },
    form: {
      immediate: true,
      deep: true,
      handler() {
        if (Object.keys(this.form)) {
          this.fId = this.form.id;
          this.formData = { ...this.formData, ...this.form };
          //console.log(this.formData);
          if (typeof this.form.gzjlList !== "undefined") {
            this.gzjlList = this.form.gzjlList;
            this.formData.gzjlList = this.form.gzjlList;
          }
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/table.less");
@import url("../assets/common.less");
.title {
  width: 10% !important;
  text-align: right !important;
}
.add {
  color: #fff;
}
</style>
